<template>
  <t-space direction="vertical" size="large">
    <!-- 如果 t-step-item 没有传入 value，则使用 index 作为唯一标识 -->
    <t-steps :defaultCurrent="1">
      <t-step-item title="已完成的步骤"></t-step-item>
      <t-step-item title="进行中的步骤"></t-step-item>
      <t-step-item title="未进行的步骤"></t-step-item>
      <t-step-item title="未进行的步骤"></t-step-item>
    </t-steps>
    <!-- 使用 options 渲染步骤条 -->
    <t-steps v-model="current" :options="steps"></t-steps>
  </t-space>
</template>

<script setup>
import { ref } from 'vue';

const current = ref('third');
const steps = ref([
  {
    title: '已完成的步骤',
    value: 'first',
    content: '点击切换步骤',
  },
  {
    title: '进行中的步骤',
    value: 'second',
    content: '点击切换步骤',
  },
  {
    title: '进行中的步骤',
    value: 'third',
    content: () => '这是进行中的步骤',
  },
  {
    title: '已完成的步骤',
    value: 'forth',
    content: '点击切换步骤',
  },
]);
</script>
